<template>
    <div class="formulate">
        <div class="head"></div>
      <!--  <div class="header">
            <div @click="$router.go(-1)" class="header-btnLeft"><img src="../assets/back-btn.png"></div>
            <h1 class="header-title">需求提交</h1>
            <div class="header-btnRight"></div>
        </div>-->
        <div class="list" v-for="(item,index) in service">
            <div class="list-item">
                <h3 class="list-item-title">{{item.title}}</h3>
                <div class="list-item-opts">
                    <span v-for="(item2,index2) in item.opts" @click="selectService(index,index2)"
                          :class="{'active' : item2.select}">{{item2.name}}</span>
                </div>
            </div>
        </div>

        <div class="list2">
            <form bindsubmit="formSubmit">
                <div class="list2-title">联系人信息</div>
                <div class="list2-item">
                    <div class="list2-item-title">联系人<span class="warning">*</span></div>
                    <div class="list2-item-input"><input name="username" v-model="username" placeholder="请输入联系人的姓名"/>
                    </div>
                </div>
                <div class="list2-item">
                    <div class="list2-item-title">手机号<span class="warning">*</span></div>
                    <div class="list2-item-input">
                        <TelCode :phoneCode="phoneCode" v-on:phoneCodeFn="phoneCodeFnFn"></TelCode>
                        <input name="phone" class='list2-item-input-phone' v-model.trim="phone" placeholder="请输入手机号码"
                               maxlength="30"/></div>
                </div>
                <div class="list2-item">
                    <div class="list2-item-title">备注</div>
                    <div class="list2-item-input"><textarea name="remarks" v-model="remarks" placeholder="选填，如：希望定制师何时联系您，对航班、酒店、景点的具体要求，出行偏好等"></textarea></div>
                </div>
                <!--<div class="list2-item">
                    <div class="list2-item-title">邮箱</div>
                    <div class="list2-item-input"><input name="email" v-model.trim="email" placeholder="方便接收定制确认信息"/></div>
                </div>
                <div class="list2-item">
                    <div class="list2-item-title">微信号</div>
                    <div class="list2-item-input"><input name="wechat" v-model="wechat" placeholder="方便与您确认定制信息"/></div>
                </div>
                <div class="list2-item" v-if="tabCurr">
                    <div class="list2-item-title">企业名称</div>
                    <div class="list2-item-input"><input name="company" v-model="company" placeholder="请输入企业名称"/></div>
                </div>-->
            </form>
        </div>
        <div @click="nextStep" class="list-btn"><span>提交定制</span></div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import TelCode from '../components/TelCode';
    import storage from '../store/localstorage'

    export default {
        name: "FormulateSubmit",
        components: {
            TelCode,
        },
        data() {
            return {
                username: '',
                wechat: '',
                phone: '',
                phoneCode: '电话区号',
                email: '',
                company: '',
                remarks:'', //备注
               /* formulate: '', //定制数据
                orgId: '', // 出发地
                orgName: '',
                orgDate: '',//出发日期
                tagId: '',// 目的地
                tagName: '',
                tagDate: '', //返程日期
                dayNum: 0,//预定天数
                openPeopleFlag: false,
                adultNum: 0, //成人数量
                childNum: 0, //儿童数量
                budget: '', //预算
                tabCurr: 0,
                tabMenu: [{name: '个人定制'}, {name: '企业定制'}],*/
                service:[
                    {
                    title:'需要提供哪些服务（多选）',
                    opts:[
                            {name: '行程规划', select: false},
                            {name: '行程管家', select: false},
                            {name: '包车', select: false},
                            {name: '自驾', select: false}
                        ]
                    },
                    {
                        title:'需要预订哪些业务（多选）',
                        opts: [
                            {name: '特色体验', select: false},
                            {name: '酒店预订', select: false},
                            {name: '机票预订', select: false},
                            {name: '门票预订', select: false},
                            {name: '保险预订', select: false},
                            {name: '签证办理', select: false}
                        ]
                    }
                ]
            }
        },
        methods: {
            phoneCodeFnFn(val) {
                this.phoneCode = val;
            },
            selectService(idx1,idx2) {
                this.service[idx1].opts[idx2].select = !this.service[idx1].opts[idx2].select;
            },
            selectServiceOrder(index) {
                this.serviceOrder[index].select = !this.serviceOrder[index].select;
            },
            nextStep() {
                if (!this.username) {
                    Toast({
                        message: '请输入联系人姓名',
                        duration: 1000
                    });
                    return;
                }
                if (!this.phone) {
                    Toast({
                        message: '请选输入手机号码',
                        duration: 1000
                    });
                    return;
                }

                this.saveInfo();
            },
            // 提交信息
            saveInfo() {
                var serviceVal=[];
                this.service.forEach(item=>{
                    var val={
                        title:'',
                        val:''
                    };
                    val.title=item.title;
                    item.opts.forEach(item2=>{
                        if(item2.select) {
                            val.val += item2.name + ',';
                        }
                    })
                    serviceVal.push(val)
                })

                console.log(serviceVal);

                var params = {
                   /* classId: this.classId, //0个人、1企业
                    orgName: this.orgName,// 出发地
                    tagName: this.tagName,// 目的地
                    orgDate: this.orgDate,//出发日期
                    tagDate: this.tagDate,//返程日期
                    dayNum: this.dayNum,//预定天数
                    adultNum: this.adultNum,//成人数量
                    childNum: this.childNum, //儿童数量
                    budget: this.budget,//预算*/
                    username:this.username, //联系人
                    phoneCode:this.phoneCode, //电话区号
                    phone:this.phone,//电话号码
                    remarks:this.remarks, //备注
                   /* wechat: this.wechat, //微信
                    email:this.email, //邮箱
                    company:this.company, //企业名称*/
                    service:JSON.stringify(serviceVal), //服务[{title:'标题',val:'包车,自驾'}，{title:'标题',val:'包车,自驾'}]
                }
                this.axios.post('/', params)
                    .then(res => {
                        console.log(res)
                        Toast({
                            message: '定制信息提交成功！',
                            duration: 1000
                        });
                    })
                    .catch(err=>{
                        console.log(err);
                    })
            }
        },

        mounted() {
           /* this.formulate = storage.get('formulate');
            if (this.formulate) {
                this.tabCurr = this.formulate.classId || 0;
                this.orgId = this.formulate.orgId || '';
                this.orgName = this.formulate.orgName || '';
                this.tagId = this.formulate.tagId || '';
                this.tagName = this.formulate.tagName || '';
                this.orgDate = this.formulate.dateBegin || '';
                this.tagDate = this.formulate.dateEnd || '';
                this.dayNum = this.formulate.dayNum || '';
                this.adultNum=this.formulate.adultNum || '';
                this.childNum=this.formulate.childNum || '';
                this.budget=this.formulate.budget || '';
            } else {
                storage.set('formulate', {"classId": 0});
            }*/
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(120);
        background: $bgcolor1;
    }

    .formulate {
        position: relative;
        background-image: url(../assets/formulate_bg.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        min-height: 100%;

       /* position: relative;
        background: $bgcolor1;
        min-height: 100%;*/
    }
    .head{
        height: rpx(250);
    }

    .header {
        display: flex;
        align-items: center;
        padding: rpx(30);
        justify-content: space-between;
        background: $color0;
        border-bottom: 1px solid $color2;

        &-btnLeft {
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);

            img {
                width: rpx(32);
                height: rpx(32);
            }
        }

        &-btnRight:after {
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }

        &-title {
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }

    .tab {
        background: $color0;

        &-menu {
            display: flex;
        }

        &-menu-item {
            flex: 1;
            padding: rpx(30) rpx(20);
            text-align: center;
            color: $color5;
            font-size: rpx(32);
            border-bottom: solid $color2 rpx(4);

            &.active {
                color: $color3;
                border-bottom: solid $color3 rpx(4);
            }
        }
    }

    //项列表
    .list {
        margin:  rpx(30);
        box-shadow: 0 0 10px $color5;
        border-radius: rpx(10);
        background: $color0;
        padding: rpx(30) rpx(20);

        &-item {
            position: relative;
            padding: rpx(20) 0;

            &-title {
                font-size: rpx(28);
                padding-left: rpx(10);
            }

            &-opts {
                padding: rpx(30) 0 0;
                display: flex;
                flex-wrap: wrap;

                span {
                    display: inline-block;
                    box-sizing: border-box;
                    width: 31%;
                    padding: rpx(20);
                    margin: rpx(10) 1%;
                    background: $bgcolor1;
                    font-size: rpx(28);
                    color: $color5;
                    text-align: center;
                }

                .active {
                    background: url(../assets/formulate_ok.png) no-repeat bottom right $color3;
                    color: #fff;
                }
            }
        }

        &-btn {
            display: block;
            margin: rpx(60) 0 rpx(30);
            height: rpx(80);
            line-height: rpx(80);
            background: $color3;
            border-radius: $radius6;
            color: $color0;
            font-size: rpx(34);
            text-align: center;
        }
    }

    .list2 {
        margin: rpx(30);
        box-shadow: 0 0 10px $color2;
        border-radius: rpx(10);
        background: $color0;
        padding: rpx(30) rpx(20);

        &-title {
            padding: rpx(20) rpx(10) rpx(30);
            font-size: rpx(28);
            font-weight: bold;
        }

        &-item {
            display: flex;
            align-items: center;
            padding: rpx(30);
            border-bottom: solid 1px $color2;

            &-title {
                width: rpx(180);
                font-size: rpx(30);
            }

            &-input {
                flex: 1;
                display: flex;

                input {
                    font-size: rpx(30);
                }
                textarea{
                    width: 100%;
                    height: 60px;
                }
                &-phoneCode {
                    width: rpx(120);
                    border-right: solid 1px $color2;
                }

                &-phone {
                    overflow: hidden;
                    padding-left: rpx(20);
                    width: 80%;
                }
            }

            .warning {
                color: $color3;
            }
        }
    }
</style>

